DHTML Menu Builder

Welcome to a new and exciting world in HTML authoring tools.

Many new features have been implemented in order to provide a wider range of possibilities to HTML authors... but... these technologies are usually hard to implement, too hard to understand and way too complicated to actually be helpful.

CSS or Cascading Style Sheets are a new set of attributes that can be applied to almost any HTML component, giving you the ability to format content in a way never before imagined. The problem is that implementing such features in a real world situation could lead you into frustration.

Something that many authors have tried, for ages, is the ability to implement pulldown menus in their HTML documents. Pulldown menus is something you'll find on every graphical OS. Why? Well, because is-simply-the-easiest way to navigate!

However, trying to do a pulldown menu by hand, can be a very tedious job. Even if you finally succeed, you'll regret the day you decided to implement the menus every time you need to add, change or remove an option from it!

Well... here's where DHTML Menu Builder comes in!

What is DHTML Menu Builder?

It's an easy to use utility will let you build your own menus using an
intuitive user interface, without having to write a single line of code!!!


Online Support

Please select the type of support that best suits your needs:

If you're looking for the latest information about DHTML Menu Builder, updates or breaking news about it, please go to our Software Division Web site at:

http://software.xfx.net/utilities/dmbuilder

The DHTML Menu Builder FAQ section is frequently updated with the latest and most common question we receive from other users. It is highly recommended that you read it:

http://software.xfx.net/utilities/dmbuilder/faq.htm

There's also a public forum where users post their questions and comments regarding the use of DHTML Menu Builder and its available here:

http://software.xfx.net/uboards/uboard_dmb.htm

A nice resource of information is he online Advanced Tutorial, available here:

http://software.xfx.net/utilities/dmbuilder/tutorial/index.html

If you need to contact us, please use the feedback form available here:

http://software.xfx.net/support.htm

If you're a registered user of DHTML Menu Builder, make sure you include the order number of your purchase in the support form.


Register

DHTML Menu Builder is a powerful utility at a very affordable price.
For information about registering DHTML Menu Builder please make sure you're connected to the Internet and follow this link:

http://software.xfx.net/utilities/dmbuilder/register.htm

For multiple licenses (on same site) please refer to the following table:

Number of licenses

Price

1 - 3

 $65.00 (each)

4 - 10

 $54.00 (each)

11 or more

 $39.00 (each)

Notes on upgrading from any previous version

Just download the latest version available from our web site and use your unlock code to register it.
If you purchased DHTML Menu Builder version 2.4 or below you will have to request a new unlock code.


Understanding DMBuilder

Understanding DHTML Menu Builder

The pulldowns created by DHTML Menu Builder are HTML tables (or layers in the case of Navigator) that act as containers, known here as groups. Every cell in the table is a menu item, to which we will refer to as a command.

DHTML Menu Builder let's you create such tables using an interface similar to a directory listing from Microsoft Windows Explorer.

Why similar to a directory listing?

Well, because you can think of the main menu options as folders (or containers) and the menu items (or commands) as the files.

With DHTML Menu Builder you can set properties such as font type, size and decoration, border size and color and the shape of the mouse pointer.

DHTML Menu Builder will create several files after the compilation of a project:

File Name

Purpose

The .js files

These files, with .js extension, contain all the code necessary to handle the menu system.
hRef.txt

In this file are all the instructions to make your links call a particular menu.

Since DHTML Menu Builder does not create the toolbar from where the menus are called, you should design this toolbar even before you start creating the menus.

Then, after the menus have been created and compiled, you will use the HotSpot Editor tool, integrated into DHTML Menu Builder to attach the necessary code to you HTML documents so the hotspots become active, that is, respond to the mouse events of the user and display the appropriate menus.

If you whish to do this step by hand, in the hRef.txt file you'll find all the code that needs to be added in order to load the JS files and convert your hotspots into active hotspots.
Again, check the Tips & Tricks section for some guidelines on how to do this.


Project Properties

DHTML Menu Builder organizes your groups and commands under projects.

The projects are composed of a single file containing all the necessary information about your groups, commands and their settings and properties.

But the projects also have their own settings, that basically, modify the way the menus are compiled and control the behavior of the groups as if these were treated as a whole. To access your project's properties, you can either click the Project Properties icon [image] or select the Tools->Project Properties menu command.

The Project Properties dialog will let you set

On the General section

Project Name

This is the name you will use to identify your project

Local Path to the Root Web

This is the folder where your front or home page (i.e.; index.html or default.asp, etc.) is located.

Folder to store the Compiled Files

Using the Browse button you can set here the folder where you want DHTML Menu Builder to store the compiled .js and hRef.txt files. This is folder will also be used to store any images that you have set up on your menus.

Document containing the HotSpots

Using the Browse button you can set here the file that contains your toolbar, with the hotspots. This is required in order to use the Hot Spot Editor tool.
Sometimes it is a good idea to have the hotspots in a separate file and share it across all the other documents. This field should point to this file.

Final HTML document

This is the document where your page is fully rendered.
Sometimes it is a good idea to have the hotspots in a separate file and share it across all the other documents. This field should point to the main file that uses the other shared documents.

If the main file on your web is a preprocessed document, such as an ASP, PHP3, or SHTML file, you can use here the fully qualified URL to the file, so the it is preprocessed by your web server before its loaded by the HotSpot Editor.

IMPORTANT: If your main file is a frameset, do not use it here, instead, use the page in your frameset that displays the menus.

Unfolding Effects

You can choose from three different effects to show your menus

Effect

Result
(none) | The menus will appear normally with no effects.
Bidirectional | The menus will appear growing from left to right and from top to bottom.
Vertical | The menus will appear growing from top to bottom.
Horizontal | The menus will appear growing from left to right.
Random | Every time the menus are loaded, the system will choose one effect in random order.

Use Full Paths

Check this option if you are publishing or previewing your menus from a web server. Leave it unchecked if you're previewing your menus from a local folder.
If you check this option, DHTML Menu Builder will automatically generate full paths to the pages linked by the Action of each command.

You should always enable this option and preview from a web server, if your target documents and images are located in directories above your front page.

On the Frames section

Enable Frames Support

Check this option to enable frames support.

Frames Document

Make this setting point to the HTML document where your frames set is defined.

HotSpots Frame

Select from the list the frame name where your hotspots are located

Menus Frame

Select from the list the frame name where your menus will be displayed

On the Advanced section

Code Optimization

Select the type of optimization you want to use for the code.

Method

Result
DEBUG | This setting will create a single JS file called menu.js and will not use any optimization. This option should only be used for testing purposes and troubleshooting.
FINAL | This setting will create two files, each one optimize for each supported browser. These files will be up to 40% smaller.

IMPORTANT: If you change the name of any group or the type of Optimization, compiling will not be nough to reflect the changes on you implementation. You will also need to run the HotSpot Editor.
In order to make it easier for you, you can choose the Compile & Update HotSpots option, by clicking on the small arrow besides the Compile icon on the main toolbar.

AddIns

Select from the list any AddIn you whish to use when compiling your project.
For information on what does each AddIn, you can click on the [image] button.


Basics

DHTML Menu Builder Items Introduction

Here are some guidelines to start creating a project. In this section you will get familiar with the different items in DHTML Menu Builder that are used to create the menus.

For further and more detailed information you should take the Tutorial after reading this section.

It is a good idea that before you start creating your menus, you have all your documents done, and ready. Why? Because you'll have to tell DHTML Menu Builder where these files are located. This is not mandatory, but just a good idea, because you'll always be able to re-open your project and make any changes to it.

Now that we have everything ready, let's get started.

Creating menus in DHTML Menu Builder is so easy, there are only three steps required!

[1] The Project

The first thing you should do is to set the Project Properties.
To access the project properties dialog, press the CTRL+P shortcut key.

In the General section, enter you project name, such as My Web Menus, or whatever you want.
Now, to set the Local Path to the Root Web and Folder to store Compiled files parameters using the browse buttons.

The Local Path to the Root Web should point to the folder where your default HTML document (or front page) is stored.
The Folder to store Compiled files, should be a folder inside the Root Web (could be the same if you want) where DHTML Menu Builder will store the compiled menus and all the resource files, such as images, used by the project.

In the Document Containing the HotSpots field enter the file where your hotspots are defined.

In the Final HTML document enter the file that fully renders your page, including the hotspots. If this is the same as the above, just add it again.
If you use a server side rendered file, such as an ASP, PHP3 or SHTML file, you can type in this field the fully qualified URL to the file.

If you don't set these fields, you will not be able to use the Hot Spot Editor, which is a great utility, integrated into DHTML Menu Builder, that will help you set the initial positions of your menus and attach the code that triggers the menus.

The files used by the HotSpot Editor must be standard HTML documents. You can also choose ASP and INC pages, but just make sure the all of them have the basic opening and closing tags: <html><body></body></html>

Select whether if you want your menus to be displayed using one of the pre-defined effects.

If the menus you're going to implement will be viewed from a local folder, instead of a web server, make sure you leave the Use Full Paths setting unchecked, otherwise check it.

In the Advanced section, choose which kind of code generation would you like to work with, selecting one of the options from the Code Optimization list.
Every time you start to work on a new project its recommend to use the DEBUG option. This will create a single commented-and-easy-to-read JavaScript file that can be easily debugged for problems.

[2] The Groups

To create a group (or container) either click the Add Group [image] icon or press the F6 shortcut key.

A single project file must be used to store all the groups, because you can only call one .js file at a time. So if your page will display more than one pulldown menu, you must create, into the same project, one group for each menu. There's no limit on the number of groups a project file can have.

Just after creating a group, DHTML Menu Builder will let you change its name.
This name is just an internal reference, and it will be used by the script to identify it.
This name should not contain any special characters, such as spaces, commas, etcetera and you should not use it on any other item. Also it is very important to use unique names that do not refer to internal functions or variables... so be creative and use names that could hardly be used for any other thing.

If you're using a DHTML based editor to create your pages, make sure you don't use the names assigned to images by the editor for your groups or commands. Having more than one element in the page with the same name will produce unpredictable results.

You've also the option to select what will trigger the menu, by selecting the appropriate event under the Triggered By list.
For the groups, the default action should be By Hovering, which means, when the mouse pointer moves over your hotspot.

Once a group has been created, you can start setting its properties.
As a container, you can set the background color or image, the thickness of the border (if any) and the light and dark colors of the container's frame (or border).

This is a sample container or menu group, which properties have been set to have no background image, a gray background, a 1 point border with cyan light borders and dark blue for the darkest borders.

Please note that the frame color setting has no effect when the menus are viewed using the Netscape Navigator browser.

To set such properties, simply click the [image] button on tools toolbar.

Even when the groups don't display any text, you can set the default text style the commands should have when created. This will save you a lot of time.

You may want to check the Dialogs section to see how these property dialogs work.

Once the group has been created and the properties are set, you can start adding all the menu items (or commands) you want to display whenever this menu is shown.

For more information on group, click here.

[3] The menu items or commands

To add menu commands, simply click the Add Command [image] icon or use the F7 shortcut key.

Similar as when you added the group, DHTML Menu Builder will let you change the internal name of this particular item.
This name should not contain any special characters and you should not use it on any other item.

Now, the Command Properties section becomes available and you can start setting the values which will change the appearance and behavior of the newly created command.

The Caption is the actual text that will be displayed as the item's description when the menu is shown.

If this command will be used to display another menu, that is, a cascading menu, you must click the Cascade button.
A list of available groups that can be displayed will be shown as target menus.

If the item is a normal menu command, then you can use the Action text box to type any valid URL address. This address will be passed to the browser whenever this command is activated.

If the Action property will be used to execute some scripting command, make sure you precede the command with the javascript: prefix. For example, if you wish to display a dialog box, you should do it like this:
javascript:alert('Hello World');

The Triggered By section will let you choose which event will send the URL to the browser, or in the case of cascade type commands, show the cascading menu.
For commands, the default action should be By Clicking.

Finally, use the four Style buttons, Color, Font, Cursor and Image to set these properties for the commands.

Please note that the Cursor settings have no effect when the menus are viewed using the Netscape Navigator or Internet Explorer 5.0 for the Macintosh.

You may want to check the Dialogs section to see how these properties dialogs work.

For more information on commands, click here.


Groups

DHTML Menu Builder Items
Groups

DHTML Menu Builder groups each menu item (or command) into Menu Groups.
You should think as menu groups as the pulldown menu it self.

A single project file must be used to store all the groups, because you can only call one .js file at a time. So if your page will display more than one pulldown menu, you must create, into the same project, one group for each menu. There's no limit on the number of groups a project file can have.

Each menu group can have its own particular properties such as background color, border width, etcetera.

To add a group to your project, press the F6 shortcut key or click the [image] icon on the toolbar.

A new, blank group menu will be appended to the end of the project.
This is the time to type a name for the group. The name should be a reference name.
For example, if we want to create a menu which will contain items we sell, we could name this group SaleItems.
You should not use special characters such as double or single quotes, slashes, commas, spaces or any other character apart from letters and numbers.

Now that the new Group Menu has been created, you can start setting its properties.

The first property you should set is the trigger event. This will let you choose what event should the menu system listen for in order to display the pull down menu. The default event for every newly created group is By Hovering, that means that the menus will be displayed by just moving the mouse cursor over the hotspot.

This event will be captured by some item on your HTML document, known as hotspot. This item can be an image, a cell, a paragraph or any other HTML component that supports Java Scripting event capturing. The necessary code that must be added to these items is available in the hRef.txt file that is generated when you compile the project and is located in the same directory as the .js files.
As new feature in version 2.x, the Hot Spot Editor can attach this code for you!

These are all the events you can choose from:

Event

 Result
Hovering | The pulldown menu will be display when the mouse passes over the triggering or hotspot item.
Clicking | The pulldown menu will be display when the user clicks the triggering or hotspot item.
Microsoft's Internet Explorer supports these events in almost any HTML tag. Netscape's Navigator version 4.x has many limitations. For example, paragraphs items <P> supports the Hovering event, but not the Clicking and the images support any of the three events. You should check Netscape's Developer site for more information on these kind of limitations. To avoid complications, always convert your hotspots into anchors. For example, if you whish to use an image as a hotspot, convert the image into a null hyperlink. Check the HotSpot Editor section for more information.

The rest of the properties can be accessed via the Style buttons

The Color properties of a menu group let you set the background color or image of the pulldown and whether if the group will have a border. In the case you set it to have borders, you can also choose the color of the light and dark borders of the surrounding frame.

Please note that the frame color setting has no effect when the menus are viewed using the Netscape Navigator browser.

The Font button will open the Menu Group's Font Property dialog. Even when Menu Groups do not display any text, it can be used to set the default text of the menu commands that will be created under this group.

The Leading buttons are used to increase or decrease the vertical spacing between the menu commands of the selected group.

And finally, the Special Effects button will let you set up some cool effects on your menus, such as drop shadow or transparency.

Some tips about the groups

You may have noticed that the properties of a group affect each menu command contained in the group at the time they're created. This means that setting the correct parameters for each group will save you a lot of time when adding the commands.

Usually, you'll want to have groups with the same properties, that is, groups that have the same colors, border settings and font types.

Once you have set the properties for the first group, you can copy its parameters and paste them into another group.

The copy and paste features of DHTML Menu Builder have been highly enhanced to accommodate the application needs. For more information you should take the tutorial where these features are explained in much more detail.


Items

DHTML Menu Builder Items
Commands

Every item contained within a group is a Menu Command.
You should see the menu commands as the options of a pulldown menu.

Each menu command can have its own particular properties such as font properties, text color, etcetera.
DHTML Menu Builder can have three different types of menu commands:

  • Normal Menu Commands
    To add a Menu Command press the F7 shortcut key or click the [image] icon on the toolbar.
  • Line Separators
    To add line separator click the shortcut key SHIFT+F7.
  • Cascade Menu Commands
    To add a cascade menu, add a normal command and change its type property to Cascade from the Menu Command Type toolbar

Once a menu command is created you must select a name for this item. The name should be a reference name.
For example, if this command is part of a list of items that are in sale, we could name it siTelephones.

Note the prefix in the name "si" stands for [s]ale[i]tems which is the name we gave the group where this command is listed.
It is a good practice to name groups and commands like this, but of course, you can use your own naming conventions that you're already used to.

You should not use special characters such as double or single quotes, slashes, commas, spaces or any other character apart from letters and numbers.

Normal Menu Commands

These are the basic components of a pulldown.
With the menu commands you display the options of your menu, wait for an event triggered by the user that is navigating the menu and produce some action when the user activates one of the commands. You can load another page in the browser, you can display a message dialog, actually, you can do anything you could as if these commands where simply hyperlinks on a web page.

In the Caption property you must type the actual text that will be displayed in the compiled menu.
Following with our Sale Items sample, we should type here Telephones.

The font and color properties of this label can be set using the Style buttons explained bellow, but in order to achieve even higher levels of customization, you can use HTML tags in the Caption property, just as if you were formatting text on an HTML document. For example, lets say you want to add the label "Saturday, January 1st, 2000" . Notice how the "st" is superscripted. The HTML tag to do so is <sup>. So this is what you should type in the Caption text box: Saturday, January 1<sup>st</sup>, 2000

In the Action you should type the name of the document that you want to redirect the user when this command is activated. You can also insert simple JavaScript statements, such as javascript:alert('Hello World');. This will display a dialog box with the "Hello World" message on it!
But again, following with our sales sample, we would probably prefer to type the name of the document with our list of telephones, for example tels.html.

If you would like to prevent any interaction from the user with a command, just uncheck the Action checkbox. DHTML Menu Builder will compile this command just as the rest, but no action will be taken when the user moves the mouse over it, or clicks it.

On a project with frames support enabled, you will also have the option to choose the target frame where the link in the Action property should open.

The trigger event will let you choose what event should the menu system listen for in order to execute the statement specified in the Action filed. The default event for every newly created command is the Clicking event.

These are all the events you can choose from:

Event

Result
Hovering | The command will be activated it when the mouse passes over the menu command.
Clicking | The command will be activated it when the user clicks the menu command.

The Status Text property will let you type a small paragraph of text.
This text will be displayed on the browser's status bar when the mouse passes over the command. This can be very useful and should be used to type small description of what that particular menu command does or means.

Finally, the Style properties can be accessed using the style toolbar

With the Color properties dialog you can set the text and background color of the command at its normal state and when the mouse passes over it.
The Font properties dialog lets you specify the font type, size and style of the command at its normal state and when the mouse passes over it.
You can set the cursor shape of the mouse with the Cursor property dialog. The cursor will change its shape when the mouse passes over the command.

The cursor property is only supported by Internet Explorer 4.0 or above. The mouse cursor will change into the default pointer, the hand, when the mouse passes over any of the commands when the menus are viewed with Navigator or Internet Explorer 5 for the Macintosh.

Finally, the Image properties dialog lets you choose to display a small image at either side of the command, at its normal state and when the mouse passes over it.

Line Separators

These special items are used to separate commands in the same group. Only the line color can be customized for these items.
The compiled menu will display an horizontal line in the place where this item is placed.
If you don't want to use the integrated line separator generated by DHTML Menu Builder, you can create a command with no action (the Action property disabled) and type the HTML <hr> tag into the Caption property.

Cascade Menu Commands

These are special items in the menu commands collection and are used to display another pulldown when activated.
The Action is substituted for a list of available groups. Simply select a group from the list and whenever this command is activated the selected group will be displayed.

Some tips about the commands

In a common situation you may want to set the same color and font properties for every menu command under the same group, and usually, for the whole project.

The easiest way to accomplish such task on a large project is by setting the initial command properties on the group properties.
As you learned in the groups section, you can set the default color and font values at the moment you create a group, and such parameters will be adopted by every newly added command.

Some properties can not be set via the group properties dialogs. These properties, such as the image or cursor can be copied from a command to every other command under the same group using a single option. Simply set the parameters, color and font of a command and select Edit->Copy. This will display the Selective Copy dialog.
Check the properties you want to copy and click OK.
Now, select Edit->Paste and the Selective Paste dialog will show up. You can choose which properties to paste, by just checking the ones you want and set the domain of the paste operation by selecting to what command(s) you want to paste the properties on the clipboard.

The copy and paste features of DHTML Menu Builder have been highly enhanced to accommodate the application needs. For more information you should take the tutorial where these features are explained in much more detail.


Previewing

DHTML Menu Builder Actions
Previewing

One of the greatest features of DHTML Menu Builder may be its ability to let you preview how your menus will look, without going through the entire implementation process, giving you the ability to know if the menus are going to look just the way you want them to.

The preview process will go through a preliminary compilation without actually creating the .js files and create a sample Web page that will display your menus and automatically create sample hot spots elements so you can test the menus' behaviors.

To preview your work, simply click on the Preview icon [image] or use the keyboard shortcut: CTRL+I.

By default, DHTML Menu Builder will use the integrated Preview module, but you can choose to preview directly to any browser you may have installed on your system. To select the default browser you to use when previwein, just click on the small arrow besides the Preview icon and click on Set Default Browser...

Using this dialog you will be able to add browsers to the list and choose which one to use when previewing. Note that you can also specify applications other than browsers. For example, you could add the Notpad application, so instead of previewing the code visually you can see its source.

The default browser is identified by the one in bold text.

In order to use the integrated Preview module you will need to have Internet Explorer version 4 or above installed (Version 5.5 is highly recommended).


Compiling

DHTML Menu Builder Actions
Compiling

The compilation process is the final stage of the menu design.
This process will create all the necessary code in order to make the menus you have just designed using DHTML Menu Builder's interface.

The files that are created and updated using this process are the .js and the hRef.txt files. To know more about what these file actually do, click here.

DHTML Menu Builder does not work over you current HTML documents, so their integrity is fully maintained and are never touched by compilation process.

To know how to implement the compiled files into your HTML documents, click here.

To do a full compilation, either click the compile icon from the main toolbar or select Compile from the Tools pulldown menu.

IMPORTANT: If you change the name of any group or the type of Optimization, compiling will not be enough to reflect the changes on you implementation. You will also need to run the HotSpot Editor to update the trigger code attached to your hotspots.


Setting the Hot Spots

DHTML Menu Builder Actions
Setting the HotSpots

Introduction

The hotspots are HTML elements on your web page, usually arranged in a way that mimic a toolbar, that will be used as triggers for the menus. This means that whenever the user's mouse moves over or clicks one of these items, a menu will be displayed.

These elements must be created by you, because DHTML Menu Builder does not create the hotspots. This will allow you to be as creative as you need to and blend your toolbar design with the rest of the page layout.

There's only one thing you must remember when creating these hotspots... no matter what type of hotspots you're using, images, text, or whatever, they must be converted into null hyperlinks.

A null hyperlink is a hyperlink that points to itself. Let's say you have a hotspot that is actually an image. Its source HTML code should look very similar to this one:

<img
    border="0"
    src="images/op1.jpg"
    width="560"
    height="61">

Then, to convert the <img> tag into a null hyperlink, all we have to do is enclose the <img> tag between a null anchor:

<a
    href="#"><img
    border="0"
    src="images/op1.jpg"
    width="560"
    height="61"></a>

For more information you can review our online Advanced Tutorial, the section The null-Hyperlink mystery

Starting the HotSpot Editor

To start the HotSpot Editor, you can select it from the Tools->HotSpot Editor.

You will notice that the HotSpot Editor looks very similar to a web browser and it will have loaded your web site's main HTML document, previously specified in the Final HTML Document property of the Project Properties dialog.

The HotSpot Editor Interface

In the group list you will find all the groups you have created in your project. To the left of the group list is the (x, y) coordinates where the menus will appear.

The Alignment list gives you the option to position the menu in several different ways, relative to the hotspot so you can better accommodate it to your layout.

Setting the HotSpots

To start attaching your groups to the hotspots in your page, just locate the hotspot for the selected group and click it. You will notice that the HotSpot Editor will make the hotspot darker so you know it has been assigned. Also, you'll notice that a rectangle appears when you move through the possible hotspots so you can have a preview of how they will look like.

Then, simply select another group from the list, or the Next button to select the next one, and click over another hotspot. repeat this procedure until you have attached all the hotspots.

Once you're finished attaching the hotspots, click the Save button to apply your changes.

The HotSpot Editor will then attach the necessary code to your hotspots so when activated it by the user, they display the menus. Also, it will include the code necessary to load the JS file(s).

You must keep in mind that the HotSpot Editor will modify your HTML document when you click the Save button. Even when we have worked very hard to try to preserve the exact format of the original file, some reformatting may take place when the HotSpot Editor attaches the code.

Since your page will be edited and modified, it is a very good idea to always make backup copies before trying the HotSpot Editor.

Using the HotSpot Editor on documents using frames

This information applies only when your hotspots are in one frame, but the menus will show in another

Let's take a common situation where you have a web site with two frames, the first, a small banner-like frame at the top, and another big one to display the contents.

Usually, when setting the project properties, you would make the Final HTML document property point to the HTML document containing your frameset information. However, when using frames you must make an exception. Both the Document containing the HotSpots and the Final HTML document properties must point to the same file, the file that contains the hot spots.

Then, when launching the HotSpot Editor, simply attach the menus (make sure you choose the correct alignment setting) and the Editor will take care of the rest.

IMPORTANT: If you change the name of any group or the type of Optimization, compiling will not be enough to reflect the changes on you implementation. You will also need to run the HotSpot Editor.
In order to make it easier for you, you can choose the Compile & Update HotSpots option, by clicking on the small arrow besides the Compile icon on the main toolbar.


User Interface

DHTML Menu Builder features a very easy to use interface which will help you build your menu structures without having to write a single line of code.

This is a screenshot of the main window

The main display is divided in two sections. The left side of the main window is where you design your menus structure.
Represented in bold text and by the [image] icon are the groups. Right below each group there are a set of commands, represented by the [image] icon.

This image shows you how DHTML Menu Builder represents groups and the different types of commands.

When you click over any of the items in this view, DHTML Menu Builder will automatically update its interface to show you what buttons, text boxes or menu items can be used with the selected item.

For example, because groups do not support the Caption property, when you select a group this textbox will be disabled, and it will be re-enabled when you select a command. But, if you select a separator (which is a special type of command) the Caption property will be disabled again, because separators are only lines and do not have any text to display.

This way, the program always maintains the same interface, just disabling the settings that do not apply to the select item.


Dialogs

DHTML Menu Builder uses several dialogs in order to provide you with an easy way to set and change the properties of menu groups and commands.

Note: Every dialog shows between brackets the name of the group and the command item being edited.

Group Items Dialogs

With this dialog you can set a variety of settings that will affect the group container.
In this dialog you can change the group's background color, the thickness of the group's border and its color. Also you can choose to use an image for the background instead of a solid color.

Notes

  • If you decide to not to have a frame, the light and dark border colors are ignored.
  • If a background image is used, the background color is ignored

The container of a menu does not displays any text, but the actual purpose of this dialog is to set a default front style of every newly created command under this container.
You can move your mouse pointer over the "Sample menu option" text to test your settings.

Note that the dialog lets you set both, the normal text style and the style when the mouse if passing over the menu items.

This dialog will let you setup some special effects such as drop shadow and transparency.
Note that this effects use some DHTML/CSS parameters that are only currently supported by Internet Explorer 5 and above.

You can also set here some special border effects that will be applied to all the commands contained in the selected group.

Command Items Dialogs

With this dialog you'll be able to set the foreground and background color of the menu items.
You can move your mouse pointer over the "Sample menu option" text to test your settings.

Note that the dialog lets you set both, the normal color style and the style when the mouse if passing over the menu items.

With this dialog you'll be able to set the font style of your menu items.
The Default button will acquire the default text style as set in the Group Menu Font dialog shown above.
To change the default (left) alignment of the commands in the menu, select a different setting from the Alignment list.
You can move your mouse pointer over the "Sample menu option" text to test your settings.

Note that the dialog lets you set both, the normal text style and the style when the mouse if passing over the menu items.

Use this dialog to set the cursor shape of the mouse pointer when the users hovers it over the menu command.

You can move your mouse pointer over the "Sample menu option" text to test your settings.

Use this dialog to add images to your menu command items. Use the Change button to load the image you want to display.
You can resize the image typing the new size (in pixels) in the Size text boxes.
And you can make the image appear in either side of the menu command using the Alignment property.

You can move your mouse pointer over the "Sample menu option" text to test your settings.


Working with Frames: Introdcution

DHTML Menu Builder Actions
Working with Frames: Introduction

To make DHTML Menu Builder support frames you must first use the Project Properties dialog and specify the page where you frame set is defined. When you set the Frames Document property, DHTML Menu Builder will analyze the document and read all the defined frames. With this information, it will fill the HotSpot Frame and Menu Frame lists.

Now, you must select the correct frame for each setting. To better understand what frames do, let's look at this example:

This image shows a very common frames layout, where the hotspots are defined on the topmost frame, and the contents of each page is displayed on the bottom frame. Now, you must tell DHTML Menu Builder the name of the frame where the HotSpots are defined. In our example, this frame is "banner". Simply look for this frame's name in the HotSpots Frame list and select it.

You will notice that DHTML Menu Builder will prefix every frame name by the "top." keyword. This is normal.

Finally, follow the same steps to select the name of the frame where they will be displayed. Note that in our example, there's no room on the "banner" frame to display a menu, so the menus will need to appear in the bottom frame, "contents". This is what makes handling menus so tricky, because the menus are in one frame and the hotspots are in another.

There's one situation where both, the hotspots and the menus are in the same frame. Even in this case you must enable the frames support and set both HotSpots Frame and Menu Frame properties to the same value.

Loading the menus when using different frames for the hotspots and the menus

When using frames, there's a new file, frames.js that need to be called from every target file that will be loaded into the frameset. This file contains the menus.
To attach this file to your documents just run the HotSpot Editor, make sure all your hotspots are correctly defined and click the Save button.

DHTML Menu Builder will scan all the target files, looking at the Action property on each command, and it will attach the required code.

If some file is loaded into the menu frame in an indirect way and the HotSpot Editor does not attached the loader code for the frames.js to it, you will have to do it manually. Simple open the hRef.txt file with any text editor and look for the frames.js loader code information and paste it on your document.

Important notes you must read before using the menus on frames

When using menus where the hotspots are located in a different frame than the menus, you should take into note some design considerations:

  • The frame displaying the menus should be large enough so the menus can fit, otherwise the menus will appear clipped.
  • If you link a command to a page on another domain, the menus will no longer work, because of a limitation on the scripting engines that prevent that scripts can modify code on a frame located on a different domain


Working with Frames: Specifying the Target Frame

DHTML Menu Builder Actions
Working with Frames: Specifying the Target Frame

When enabling the frames support, you must tell DHTML Menu Builder into what frame the commands Action should take place.

Using our previous sample where we had two frames, banner and contents, most of the time you would like to have your pages open in the "contents" frame.

So, all you have to do is select one command, set its target frame property to top.contents (which can be acquired from the list) and copy/paste this setting to the rest of commands in the project.

There're two special Target Frame values:

  • _self, which means the Action will be executed in the same frame as the one specified in the HotSpots Frame property of the Project Properties dialog.
  • _top, which means the Action will be executed at the topmost frame. This has the consequence of having the new page substitute your frames set.

For more information on _self and _top you should check your HTML reference manual, since these are standard HTML settings.

Calling functions from the Action property

As you may already know, you can place small JavaScript statements in the Action property. If your statement will be calling a function, you must specify the frame where this function is defined.

Invalid frame names

It is a common practice to name frames by their position. For example, we have seen many web designers name the topmost frame "top", or a frame positioned on the left side "left".

This is a very bad practice and will definitely cause errors when working with DHTML Menu Builder, since these keywords, when used inside a JavaScript are reserved keywords.


AddIns Editor

AddIn Editor
Expanding the power of DHTML Menu Builder

The use of small components that extend the basic capabilities of the program, in some way or another, is now very common.
On many applications, these kind of modules are known as plugins.

In DHTML Menu Builder, AddIns can be used to change or add functionality to the JavaScript code generated by the program.
Let's say for example that you would like to change the way the menus disappear or hide. This is one of the most frequently asked questions we've received through our online support form. The answer always was, "well... you will have to compile the menus, edit the generated JavaScript file and modify it by hand."

The problem is that every time you recompile the menus, your changes are lost and you'll have to edit the file again.

Now, with the AddIn Editor you can create an AddIn that modifies the required sections of the default JavaScript file and applies it, automatically, to your menus every time you recompile!

See the Project Properties section for information on how to use an AddIn on your project.

Starting the AddIn Editor

To start the AddIn Editor click on Tools->AddIn Editor

You will receive a warning message. Read it, and answer sincerely.

Creating a new AddIn

To create a new AddIn, simply click on File->New...

You will be asked for a name (this name must not contain any special characters, only letters and/or numbers) and a description of what does the AddIn.

If you need to edit the name or description of an AddIn, simply select File->Properties.
Note that if you change the name of an already saved AddIn, and then you save it with this new name, you will be creating a copy of it.

The AddIn Editor interface

Even though the editor is quite powerful, its interface is very simple.

On the top you have a list of all the sections that can be changed. All these sections are the functions used to control the menus at runtime, except for one special section: GLOBAL. The GLOBAL section contains all the declarations of each global variable.

Each section has a small indicator. Here's what each indicator means:

The selected section has not been modified
The selected section has been modified
The selected section is a custom function and it has not been modified
The selected section is a custom function and it has been modified

Beside the list of sections are two icons, representing each supported browser. The appropriate icon will light up when the selected section is used by that particular browser.

Right below the list of sections is the Parameters field. This field will show you all the parameters, if any, that are used by the selected function. If the selected section is not a function, this field will become disabled.

Below the Parameters field is the code editor window. Here's where you can make your changes to the default code used by DHTML Menu Builder or add code to your custom functions.

At any time, you can compare your code with the default code by selecting Function->View Original.

If you need to reset a section's code to its default, you can restore its original contents by selecting Function->Restore.

IMPORTANT: When making changes to the code DO NOT CHANGE OR REMOVE the commented lines used in the default code. Doing so will damage the scripts.

Finally, below the code editor, at the bottommost part of the editor window is the description pane. Here you will find important information about the selected section and for the functions, it will contain a description of each parameter and the function's version number.

Adding/Removing new functions

If required, you can add new functions to the code. To do so, just click on Function->Add.

A dialog will appear where you can type the name of the function, the browsers that will use (or support) it and a description.

Remember that when selecting a name for the function and the parameters, you should constrain the name to limitations imposed by the JavaScript language.

Only custom functions (functions created by you, the user) can be removed. If you whish to remove your function, simply select Function->Remove.

Opening/Deleting AddIns

To view a list of all the available AddIns installed for DHTML Menu Builder on your system, select File->Open.

To open an AddIn from the list, select it and click on the Open button.

If you whish to delete an AddIn, just select it and click the Delete button.

Sharing AddIns

All the information on the AddIns is stored on a file with the .ext extension. These files are stored in the AddIns folder inside the installation path of DHTML Menu Builder. If you wish to copy some of your AddIns simply copy these .ext files.

If you wish to install new AddIns just double click it and it will automatically be copied to the AddIns folder.


Tutorial

This small tutorial will guide you into the necessary steps to create a simple pulldown menu.

It is recommended that you read the Introduction to DHTML Menu Builder's Items section first.

The following steps will help you create a group so every time we tell you to click a button, it must be a button in the Groups section.
You may want to refresh your memory with the User Interface section of this Help.

  1. First of all you should set your project properties, as explained in step [1] of the Introduction to DHTML Menu Builder's Items section with these values:
    • Project Name: Tutorial
    • Folder to store the Compiled Files: (Just choose one that its empty or create a new one)
    • Final HTML document: The HTML document where you'll be testing this sample project
    • Unfolding Effect: (Choose anyone)
    • In the Frames section make sure frames support is disabled
    • In the Advanced section set the Code Optimization to "DEBUG"
  2. Now, lets create the menu group which we'll call it: Getting Started
  3. Set the Triggered By property to: Hovering
  4. Click the Color button to show the Group Color dialog properties.
    1. Set the background color to Blue.
    2. Set the frame (or border) width to 1.
    3. Set the Light Corner's color to White.
      Set the Dark Corner's color to Black.
    4. Set both Highlight effects to (none) and the its Border Size to 1.
    5. Click OK to save your changes.
  5. Now, click the Font button to open the Group Font dialog properties dialog.
    1. Click the Change button on the Normal Font section and set it to Tahoma, Bold, 9pt
      Do the same for the Mouse Over section.
    2. Click OK to save your changes.

The following steps will help you create a command so every time we tell you to click a button, it must be a button in the Commands section.
You may want to refresh your memory with the User Interface section of this Help.

Now that we have defined all the properties of our group, lets create the menu items or commands.

  1. Click the Menu->Add Command to add the first command.
    Type its name:     what
  2. In the Caption text box type: What's DHTML Menu Builder
  3. In the Action text box type: index.html
  4. Set the Trigger event to Clicking
  5. Now click the Color button to open the Command Color property dialog.
    1. On the Normal Font section
      Set the text color to white
      Set the background color by clicking the Default button
    2. On the Mouse Over section
      Set the text color to Black
      And the Back Color to White
    3. Click OK to save your changes
  6. Now, click the Font button
    1. On both sections click the Default button
      This will apply the default font settings to this command. These settings are being inherited from the font settings of its parent group.
  7. To create the division line, simple select Menu->Add Separator or press the Shift+F6 shortcut.

This finalizes the creation of the first two menu items.
To create the other items, repeat steps 1 to 3 using this information:

Name

Caption

URL

online | Online Support | online.htm
register | Register DHTML Menu Builder | register.htm
---------- n/a n/a
trial | Trial Limitations | trial.htm

Now, to preview your project, click Tools->Compile
If you haven't saved you project, you'll be asked to do it now.

A compilation progress indicator will appear.

The compiled files will be stored in the folder you specified in the Destination Folder text box of the Project Properties dialog.

This ends the menu creation tutorial.

The next step explains how to manually implement the menus into your page. If you whish to use the HotSpot Editor tool, to do it automatically, click here to learn how.

We will now start the process of implementing the menu into an existing HTML document.

  • The code generated in the menu.js file, must be included in every document that will feature the menu.
    This code must be inserted using the <script> tag. Simply look into the hRef.txt file generated at compilation time.
    In that file you'll find this:
    <script language="JavaScript" src='menu.js'></script>

    Note that if this line may differ in your particular case, depending on your Project Properties configuration.
    To make sure you're using the correct syntax look at the end of the hRef.txt file, there you'll find the one that's right for you.

    You can put this line of code anyway in your HTML document, but to ensure that the menus are loaded before anything else on your page, place it right after the <BODY> tag.

    You may want to check the Tips & Tricks section for some ideas on how to share this line of code across multiple pages.

  • And finally, you'll have to add some special statements to your text links or graphic buttons, so they react to the event you defined as the Trigger and show the corresponding menu.
    The sensitive elements on a page that show the menus are usually called hot spots or triguers. These elements must be specially prepared in order to react to the mouse events so they can correctly be displayed.

Let's say we have created a toolbar menu on our web page... something like this:

Home Links

And we wish to show a pulldown menu whenever a user hovers over the Links text. In order to do this we will need to convert the "Links" word into a hot spot. Its really easy! Simply add the enclosing <a> tags and the statement that appears in the hRef.txt file that says "# CALL TO MENU: linksmenu". Click here to view the compiled hRef.txt file that was generated by DHTML Menu Builder for this particular sample.

For example if this is the actual <FONT> tag of your document:
<font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Links</b></font>

Simply add the ,a> tags and the statement from the hRef.txt file to the <font> tag and it will look like this:
<a href="#" OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('linksmenu', '0px', '0px', false);"><font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Links</b></font></a>

If you want to see this sample in action, click here!

Included with this tutorial is the full project file I used to create the menu on this page. Click here to load the project.

After opening the project, go to File->Project Properties and change the Destination Folder so the compiled files are stored on a valid folder on your machine.

If you wish to experiment with a more complex project, click here to load the system that is being currently used in our web site.

For more advanced tips, check our online Advanced Tutorial.


Tips & Tricks

How should you call the compiled .js files?

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

As will be explained in this documentation, the .js files should be called from all the documents in your Web that will show the menus using the scripting line:

<script language="JavaScript" src='menu.js'></script>

as shown in the hRef.txt file, which is regenerated every time you compile your project.

Note that depending on the type of code optimization the sample line above may differ from yours. Always look at the href.txt file for the correct code that should be used in your particular situation.

If you already have a page that is merged, either by using the Include Page Bot from FrontPage or by using SSI, into all of your documents, such as a header file, you should include the scripting lines in that page. This way, all your pages will automatically merge the contents of the menu.js file through your header file.

Calling the menus from text elements

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

Introduced in this new release, DHTML Menu Builder now features a Hot Spot Editor which will attach the menus to the elements you select in your document automatically.
Please review the Hot Spot Editor section of this Help for more information.
Anyway, it is a good idea that you understand how the menus are attached to your documents, so take a couple of minutes and read the information below.

Introduction

The elements on a web page that react to mouse events to display a menu can be referenced to as hot spots. These hot spots can be anything from text labels, to images or even cell elements from a table.
In order to make these elements react to the mouse events you'll have to add some special code, which is supplied to you in the hRef.txt file. Each group you created using DHTML Menu Builder's interface will have its own code which you'll have to add to different elements in your page.

Text elements, on a HTML document do not require any special HTML tag. But the calling code, generated in the hRef.txt file, must be attached a valid HTML tag in order to function properly.

Internet Explorer 5.0 is very flexible in accepting JavaScripting code in almost any tag, but Navigator only supports such additions in a very limited set of tags.

For example, if the menus will only be viewed with IE you could insert the triggering code in to a null font tag:

<font>Navigation</font>

This is a null font tag because it has no parameters.

While working with IE you could add the code generated in the hRef.txt file into the opening font tag:

<font OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav', 145, 119, false);">Navigation</font>

But unfortunately, this will have no effect when viewed using Navigator because of its poor object model... anyway, there's an easy workaround. We can create a dummy hyperlink which will be used to hold the code, like this:

<a href="#" OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav', 145, 119, false);">Navigation</a>

This combination will work fine under both, Internet Explorer and Navigator just fine.

Calling the menus from image elements

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

A more common situation may be calling a menu from an image. The approach is exactly the same as when calling it from a text element, but this time there's no need to use the hyperlink trick, since Navigator supports scripting code inside the image tag.

<img src="/images/navbutton.gif"
    OnMouseOut="if(IE){event.srcElement.style.cursor='default'};"
    OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav',
    145, 119, false);">

Project General Properties

Local Path to the Root Web

This is the folder where your home page (usually index.html or default.asp) is located.

Folder to store the Compiled files

You must specify here where DHTML Menu Builder should store the compiled files, the .js scripts and the hRef.txt. You should always make this path point to a directory inside your root web, because these files should be published along with all your HTML documents and image files.

Document Containing the HotSpots

The destination file is the HTML document from your Web that contains the toolbar with the hotspots. If you use a separate file with the menus, which is shared across all the other pages on your web, this should be the file pointed by this setting. This setting is optional and it will only be used by the HotSpot Editor.

Final HTML Document

This is the file on your Web that displays your whole page, including the menus.
This setting is optional and it will only be used by the HotSpot Editor.

Use Full Paths

Check this option if you are publishing or previewing your menus from a web server. Leave it unchecked if you're previewing your menus from a local folder. If you check this option, DHTML Menu Builder will automatically generate full paths to the pages linked by the Action of each command.

Some words about the Action property

As mentioned on the Basics section, you can use the URL section to load pages. But remember that this property will be directly passed to the browser, so there're many things that can accomplished.

For example, you could use the simple keyword "alert" to display a message. If you want to try this, try adding this line to the URL property of some menu command:

javascript:alert('Hello');

Also, you can enter here some HTML code to create some special effects in the caption of you commands.
When entering HTML code, DHTML Menu Builder will create menus that are wider than they should. To correct this problem use the Group Width setting of the group's Special Effects dialog to force a smaller width value.


What's New

This is a list of what's new in this version: 2.6

  • Adds support for infinite cascading levels (submenus)
  • Fixes a bug in the copy/paste code
  • Increased support for frames
  • New Cursor property for each group (supported only under Internet Explorer for Windows)
  • The unfolding effects are now working for Navigator again
  • Even smaller JavaScript code generation
  • Many improvements and bug fixes have been made to the AddIn Editor. Now is easier to upgrade your custom AddIns
  • To install an AddIn just double click its icon and it will be copied to the AddIns folder automaticly
  • Huge user interface enhancements
  • Support for images in the commands has been enhanced allowing the use of two separate images, one to the left and the other to the right of the command's caption
  • Unlimited Undo/Redo capability. With this new feature you're no longer required to save your project when previewing or compiling
  • Added a list of all the used colors in the current project when working on the new Color Picker
  • Removed the Absolute Path setting in the Project Properties... it was too confusing for some users. Now, DHTML Menu Builder will automatically generate the correct absolute path to the JS files, the images used in the menus and the links
  • Added a browse button to select the target files when setting the action of a command
  • Added a new option in the Project Properties, Use Full Paths. use this option to select whether your menus will be viewed from a local folder or from a web server
  • Fixed a bug that caused that deleted, renamed or moved items will still preview and compile just as if they were never deleted, renamed or removed
  • The menus are now automatically repositioned so they don't disappear outside the browser's client area
  • By request, removed the CTRL+X shortcut to close the program
  • You can also use the F12 shortcut key to to start the Preview
  • You can now choose to preview to an external browser
  • Major updates have been made to the HotSpot Editor.
    It should now detect a hyperlink no matter how deep it is placed inside nested tables or other similar tags (such as span's, div's, etc...)
    Support for imagemaps has been removed due to the numerous problems this was causing.
  • The JavaScript template that DHTML Menu Builder uses has been rewritten almost completely, fixing bugs and adding new features
  • The Preview template has been completely modified
  • The DEMO version is now capable of saving all the different parameters so you can preview. This way you will get a much better idea of what DHTML Menu Builder is capable of.
    The only disabled features in the DEMO version are: Compiling, the HotSpot Editor and the option to preview to an external browser

This is a list of what's new in this version: 2.5.103

  • Frames support is finally available!
  • AddIns support and integrated AddIn Editor to expand the capabilities of the program
  • The setup will install two AddIns that show some of the potential the new feature adds to the program
  • The URL property has been renamed into Action. Also, this Action can be disabled so the command does not respond to any mouse actions... ideal to mimic disabled menu items!
  • The text is now properly aligned on the commands for Navigator
  • Better cascade menu alignment for Internet Explorer
  • The Java Script part of DHTML Menu Builder has been rewritten almost entirely
  • Lines, or command separators, now support coloring
  • The Project Properties dialog has been enhanced to show the project file location, support for frames and support to select an AddIn.
  • The two optimization options have been renamed to better reflect what they actually do and what are they for
  • The Preview, Compile and HotSpot Editor menu options have been moved from the File menu to a new menu called Tools
  • New Color Picker will let you use the common Windows Dialog to choose colors, enter your colors manually in Hex format or use a color picker to choose from any color on the screen
  • When using the optimization method, the compiled JS files are now even smaller!
    Even when the program now produces more lines of code (and much larger lines due to the new features that have been added) the JS files can be up to 10% smaller than those compiled with version 2.4!
  • This documentation has been updated to reflect all the new features of this version
  • Builds 112, 115, 121, 125 and 126 are maintenance releases to improve the frames support and Macintosh compatibility

This is a list of what's new in this version: 2.4

  • New Effects:
    • Raised/Sunken effect for the commands of a group
    • Transparency effect for a group
    • Drop shadow effect for a group
  • Enhanced Upgrade function. Now you can see the download progress and the amount of bytes downloaded. You can also stop the operation at any time.
  • Several bug fixes for the new HotSpot Editor
  • The compilation time has been reduced dramatically!
  • Several bug fixes for the compilation engine
  • Cascading menus no longer overlap their parents

This is a list of what's new in this version: 2.3

  • The Position Agent tool is no longer available because it has been merged with the HotSpot Editor
  • The HotSpot Editor has been improved
    • Now is a graphical / WYSIWYG tool
    • It attaches the code to the hotspots, sets the position of the menus and also implements the loader code... no more manual (copy/paste) editing is need it!!!!
  • Improved compatibility for Internet Explorer 5.0 for the Macintosh
  • The JS files, when compiled with the "for Size & Speed" setting, are now about 30% smaller.
  • Images are correctly displayed and aligned on the commands
  • A new option, Help->Upgrade, is available for easier upgrading of the program
  • The commands are correctly spaced, vertically, under Navigator
  • The documentation has been updated to reflect the changes in this new version
  • The Windows's Common Color Dialog is now correctly updated with the currently selected color
  • The background image property of the groups is now functional when the menus are viewed with Navigator
  • Several cosmetic enhancements
  • And as always... several bug fixes

This is a list of what's new in version: 2.2

  • The Leading property is now functional when the menus are viewed with Navigator
  • The Frame border size property is now functional when the menus are viewed with Navigator
  • The menus, when viewed under Navigator, are rendered much better, resulting in a much better cross-browser compatibility
  • Under Navigator, the flickering of the commands when moving the mouse pointer is now no longer perceptible
  • The width and height values of the menus is now calculated in much better way, resulting in more accurate results
  • When a cascade menu is displayed, the parent menu is closed properly
  • This documentation has been updated according to the changes in the program
  • The "Size & Speed" optimization method can now be used on ASP pages

This is a list of what's new in version: 2.0

  • Main Window is now resizable
  • Both, the main window and the preview window remember last position/size
  • Added support for random unfolding effect
  • Minor UI enhancements
  • Added support for background image in menu groups
  • Now, when adding a command it is inserted after the selected one, instead of putting it at the end of the list
  • New Auto function on the Color Properties dialog sets an appropriate combination of colors for the Mouse Over event
  • All the properties dialogs reflect all the other properties on the sample label
  • New property has been added to support per command alignment
  • Enhanced Copy / Paste dialog, now gives even more flexibility
  • Hot Spot Editor lets you select where to place the "trigger" code on the target HTML document
  • Option to change the generated code optimization for either:
    • Easier implementation (same as v1.5)
    • Smaller file size (up to 60% decrease!)
  • Faster loading and compilation times
  • Enhanced compilation code:
    • Fonts size under Navigator should look better
  • The Project property Relative Path has been changed to Absolute Path
  • The help documentation has been revised and updated with all the new features
  • Context sensitive help has been implemented on almost every displayed dialog

This is a list of what's new in version: 1.5 (final release)

  • Frames support has been removed. Anyway, we're currently working to release an update which will have full support for frames. There's no release date, yet. Check our web site for more information.
  • Fixed problem that was causing, on some configuration, to show two menus at the same time.
  • Fixed the annoying runtime error 5! Thanks Matthew!!!
  • The shareware version is no longer shareware, but a demo.
    The limitations are:
    • You can not customize the font properties of the commands
    • You can not customize the color properties of the commands
    • You can not customize the image properties of the commands

    You can, however, set the default font and color properties of every command using the Color and Font properties settings of its parent group. Click here to know how to do this.

    I'm really sorry for this, but its the only way I had to fight piracy. Version 1.5.80 (which was beta 3/4) was being pirated, and there were two cracks from two different groups available all over the Internet!
    I just don't think is fair to crack a US$25.00 program!     (1.0 and 1.5 beta versions were available at US$25.00)
    So don't blame me... and blame it on Syndicate and LASH.p

  • Fixed the problem with the disabled OK button in the Browse For Folder dialog, when DHTML Menu Builder was being run under a non-English Windows version.

  • The documentation has been revised and updated with all the information that covers the new functions and options of version 1.5. I've also included a couple of sample pages to illustrate the implementation of the menus.
  • Many bug fixes! As usual.
  • The price has increased about US$34.00, why????!!!!
    Well, because the engine was upgraded to support Navigator. uh?
    Ok, Navigator may be a great browser, but is worst than a nightmare to the developers due to the huge limitations and the poor implementations of DHTML and CSS standards plus the limited document object model flexibilities.
    It took me about 2 weeks to code version 1.0... and it took me near three months to crate an acceptable engine that was capable of generating Navigator compatible code... go figure!

This is a list of what's new in version: 1.5 (beta 3, 4 and RC1)

  • Preliminary frames support!
    This feature has been added for testing purposes only, but will probably be removed by the final release, since there's no time to finish the necessary modifications to make it work with Navigator
  • Fixed problem with the menus unexpectedly stop working under Navigator when using unfolding effects
  • Better height calculation of the menu groups under Navigator
  • Fixed a problem that was causing DMBuilder to generate invalid code when using URLs with parameters, such as
    http://domain.com/page.asp?type=user
  • The documentation is almost finished... any comments, suggestions???
  • The Copy Color command, when used against groups, now copies the frame settings too
  • Fixed? Problem with the hyperlinks in the About dialog
  • Fixed some problems with the image handling code

This is a list of what's new in version: 1.5 (beta 2 second release)

  • Support for Netscape is about 95% complete
  • New Leading option lets you set the spacing between each menu command
  • Image support for the menu commands is finished
  • New project property, Relative Path added
  • Now, DMBuilder will check for invalid groups and commands names
  • It will also check for invalid characters in the URL and Status fields
  • The help document has been slightly updated
  • A couple of bugs have been fixed
  • A couple of UI enhancements

This is a list of what's new in version: 1.5 (beta 1)

  • Preliminary support for Netscape browser
  • The new Position Agent, lets you position your menus in a WYSIWYG interface
  • Support for one level cascading menus
  • Recent projects list to access your projects faster
  • Preliminary support to add images in the menu commands
  • New toolbar lets you access more options faster
  • Some shortcut keys have been changed
  • Unfolding pulldown menus effects lets you add fancy effects to your menus when they are shown, a-la-Office!
  • New help system, using the compiled HTML Help System, which is now common to many Windows applications
  • A couple of bugs have been fixed
  • A couple of UI enhancements


Troubleshooting

This is a list of common JavaScript errors, they cause and possible solution:
The errors described here are formatted the same way Internet Explorer 5.5 does.
For other versions or for Navigator, you should get very similar error reports.

'mFrame.document.all[...].style' is null or not an object

Description: This error is only caused when the menus were not rendered into the page and the scripts cannot find the menus object.
If you're implementing for frames, it is most likely that you haven't attached the loader code into the pages that will display the menus.

Solution: Remember that when using frames you must attach two files, one for the hotspots (the *menu.js files) and another for the menus (frames.js). Read this section of the help for more information. If you have attached the loader code for the frames.js file and you're still getting this error check that you have specified the correct parameters for the Root Web path and the Destination Folder. If one of these parameters is incorrect the page will not load the frames.js file. You could can check if the path is correct by opening the hRef.txt file and verifying that DHTML Menu Builder has generated a valid path to the file.

Another, cause of this problem may be that the code in your hotspots is outdated. If for example you have renamed a group, you should re-attach the code to your hotspots, otherwise, the trigger code in your hotspots will still be trying to display a group that no longer exists.

Access is denied or Permission denied

Description: If you get this error when trying to open a menu by hovering over a hotspot is because the document loaded into the menus frame is from a different domain than the hotspot's. Read this article for more information.

Solution: All your target files must be in the same domain.

IE is undefined or NS is undefined

Description: Right after the page loads, you get an error saying that IE or NS is undefined. This means that some part of the scripts tried to use the IE or NS variable and these didn't exists or where not initialized.

Solution: Your .js file(s) could not be loaded. This has usually two causes:

  1. You Root Web/Destination Folder paths are incorrect. Check that these parameters are correct.
  2. You haven't attached the hotspots using the HotSpot Editor. Remember that when attaching the code to hotspots using the HotSpot Editor it will also include the loader code for your .js files

Object Expected

Description: When you try to display a menu by hovering over a hotspot you get an Object Expected error. This means that the scripts made a call to a function that could not be located.

Solution: The attached code to the hotspots may be outdated. Re-run the hotspot editor and reattach the hotspots.

This is a list of common errors while using DHTML Menu Builder, they cause and possible solution:

An unexpected error has occurred while creating the HotSpots

Description: When you click the Save button on the HotSpot Editor you get the described error.

Solution: The HotSpot Editor needs to work over fully constructed HTML documents. So the file specified in the Project Properties as the one that contains the hotspots should have both, the opening and closing <html> and <body> tags.

The best way to find solutions to the most common problems is by:

  • Visiting the online FAQ
  • Looking at the public forum for similar posts

Problems while using the DHTML Menu Builder

If you get a run-time error while using the editor, please use our online support form and send:

  • The error code number
  • The error description
  • What were you doing
  • And if possible, your project file


Known Bugs

Known Bugs, Problems and Limitations

This is a list of known bugs, problems and limitations that we're currently working on:

  • DHTML Menu Builder does not support relative positioning of the menus (Click here for a workaround)
  • There's no way to make the menus appear above form elements (Click here for a workaround for IE only)
  • The menus will always be slightly taller when viewed with Internet Explorer and a bit shorter when viewed with Netscape navigator
  • You can only use one AddIn at the same time. If you would like to combine several AddIns, please use our online support form to request an special AddIn (for registered users only). Or, if you feel comfortable with JavaScript do it your self using the AddIn Editor.
  • Using any of the group's special effects settings can cause problems with Internet Explorer 4.0


Trial Limitations

DEMO Limitations

The DEMO version of DHTML Menu Builder, is a full functional release that do not permits compiling or using any feature that requires a full compilation, such as using the HotSpot Editor.

The use of custom browsers for previewing is also disabled.


# CALL TO MENU: linksmenu
OnMouseOut="if(IE){event.srcElement.style.cursor='';};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('linksmenu', 111, 30, false);"

# LOADER CODE. PLACE IT RIGHT AFTER THE <BODY> TAG
<script language="JavaScript" src='menu.js'></script>


.topic 20000
This view displays all your menu groups and their commands

.topic 20010
Select the type of event you want the user to perform in order for this menu to be triggered (showed)

.topic 20020
You can use these icons to open the property dialogs and set the default values for every newly created command

.topic 20030
Use the arrows to increment or decrement the distance between every command in the selected group

.topic 20040
Type here the name of the command as you want it to appear in the final menu

.topic 20050
You can set here the type of command you are creating. Normal, for the usual commands that when triggered jump to another page or Cascade for those commands that display another menu when triggered

.topic 20060
Select from the list the group you want to display when this command is triggered

.topic 20070
Type here the full path to the HTML document you want to jump when this command is triggered

.topic 20080
Select the type of event you want the user to perform in order for this item to be triggered

.topic 20090
You can type here some description of the command, so when the user moves the mouse over it, this description will appear at the status bar of the browser

.topic 20100
This is the menu's toolbar. From here you can launch the different dialogs that let you customize the appearance of your groups and commands

.topic 20110
This is the tools toolbar. From here you can access the most imporant tools integrated into DHTML Menu Builder, such as preview, compile, the HotSpot Editor, etc...

.topic 20115
This is the standard toolbar. From here you can access the most common used options to work with your projects

.topic 20120
Use these buttons to set the color of the command's text in its normal state

.topic 20125
Use these buttons to set the color of the command's background in its normal state

.topic 20130
Use these buttons to set the color of the command's text when the mouse passes over it

.topic 20135
Use these buttons to set the color of the command's background when the mouse passes over it

.topic 20140
Click this button to load the default color, as set in the color properties of its parent group

.topic 20150
Click this button to let the dialog select an appropriate combination of colors based on the Normal state colors

.topic 20160
Select from this list the shape of the mouse pointer when it passes over the command. Please not that this setting has no effect when the menus are viewed using Navigator

.topic 20170
Click this button to change the font face, size and decoration of the text command in its normal state

.topic 20180
Click this button to load the default font properties, as set in the font properties of its parent group

.topic 20190
Click this button to change the font face, size and decoration of the text command when the mouse passes over it

.topic 20200
Select from this list the alignment of the text within the group

.topic 20210
Click this button to set the background color of the group. This setting has no effect if you select a background image

.topic 20220
Click this button to select an image file as the background color of the group

.topic 20230
Click this button to remove any selected background image and use the background color property instead

.topic 20240
Select from this list the thickness of the frame that surrounds the group

.topic 20250
Click this button to change the color of the top and left sides of the frame

.topic 20260
Click this button to change the color of the bottom and right sides of the frame

.topic 20270
Click this button to change the default font face, size and decoration that will be used to when creating new commands. This setting applies for the normal state of the command

.topic 20280
Click this button to change the default font face, size and decoration that will be used to when creating new commands. This setting applies when the mouse passes over the command

.topic 20290
Click this button to select an image file and apply it to this command in its normal state

.topic 20300
Click here to remove the image from the command

.topic 20310
Click this button to select an image file and apply it to this command. This setting applies when the mouse passes over it

.topic 20320
Select from this list the position of the image, relative to the command

.topic 20330
Type here the horizontal size in pixels of the image. (A value of 16 should be the most appropriate)

.topic 20340
Type here the vertical size in pixels of the image. (A value of 16 should be the most appropriate)

.topic 20350
Type here the name of your project

.topic 20360
You should type here the full path to the directory where the menus will be stored, relative to the home page or Web's root path. For example, if the menus will be stored in the http://xfx.net/scripts/menus directory, you should type here: /scripts/menus/

.topic 20370
Type here the full path to the folder where you want to store the compiled files generated by the program

.topic 20380
Type here the full path to the HTML document where your hotspots are defined

.topic 20390
Select from this list the type of effect you want to apply to your menus when they appear

.topic 20400
Select the type of optimization you would like to use when generating the compiled js files

.topic 20410
Check to enable support for frames

.topic 20420
Select from the list the full frame name where the hotspots are located

.topic 20430
Select from the list the full path to the frame where the menus will be displayed

.topic 20440
Select the properties you would like to copy or paste

.topic 20450
Select this option to paste the selected properties to the selected command

.topic 20460
Select this option to paste the selected properties to all the items under the selected group

.topic 20470
Select this option to paste the selected properties to every command or group in the project

.topic 20480
Select the type of effect (Raised/Sunken) you want to apply to the commands of this group by default

.topic 20490
Select the type of effect (Raised/Sunken) you want to apply to the commands of this group when the mouse is moved above them

.topic 20500
Select the thickness of the effect

.topic 20510
Move the slider to the left to make the dropshadow for this group darker

.topic 20520
Move the slider to the left to make this group more transparent

.topic 20530
Select the HTML document where you frameset is defined

.topic 20540
Type here the full path to main HTML document that fully renders your page

.topic 20550
Type here the full local path to folder where your root web is located. This is the folder that contains the front page to the web that is displayed when your type http://127.0.0.1 on your browser

.topic 20560
Enable this option if your web is located on a web server. Leave it unchecked if you want to preview your menus from a local folder on your computer


Position Agent

DHTML Menu Builder Actions
Positioning the menus with the Position Agent

Making the menus align with the hot spots you've designated in your web page, can be a little bit frustrating.

That is why DHTML Menu Builder comes with a handy tool called the Position Agent.

With the Position Agent you can set, right into your final document where you would like the menus to appear.

IMPORTANT: DHTML Menu Builder only supports absolute positioning. That is why you should make your hot spots stay in the sample place regardless of the aspect of the browser's window. So, if you're using tables to align the hot spots, make sure these tables have fixed width values and not percentages.

To use the Position Agent, you must first set the Document Containing the HotSpots property.

To open the Position Agent simply click on the Position Agent icon ( [image]) on the main toolbar or Preview your project and then click on the Position Agent icon on the Preview dialog's toolbar.

The Position Agent will load the file specified in the Destination File property of the Project just as it will look from inside the browser.

  • Select from the list of groups that appear in the upper left corner of the Position Agent's window
  • While moving your mouse pointer you'll notice a cross hair cursor. Use it to specify the initial upper left corner from where the menu should appear.
  • Click the left mouse button and you'll notice how the x,y pairs get updated with the new position. So the next time you compile your project, these values will be saved in the hRef.txt file and no manual intervention will be required.

While in the Position Agent, you can choose to temporarily open an alternate HTML document to position your menus.
This can become handy, when the menus will be used in a page that will be automatically included into other pages.

If you prefer to set the x,y pairs manually, simply double click the x, y values showed on the toolbar and a text box will appear where you can type the value in pixels.


Tutorial Sample

Home Links

This is the source code for this page as it looked before it was prepared to handle the menus created by DHTML Menu Builder

<html>
 <head>
  <title>Tutorial Sample</title>
 </head>

 <body>
  <table border="0" width="200" cellspacing="1" bgcolor="#FFFFFF">
   <tr>
    <td width="50%" bgcolor="#000000"><font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Home</b></font></td>
    <td width="50%" bgcolor="#000000"><font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Links</b></font></td>
   </tr>
  </table>
 </body>
</html>

And this is how the the code looks after the preparation

<html>
 <head>
  <title>Tutorial Sample</title>
 </head>

 <body>
  <script language="JavaScript" src='menu.js'></script>
  <table border="0" width="200" cellspacing="1" bgcolor="#FFFFFF">
   <tr>
    <td width="50%" bgcolor="#000000"><font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Home</b></font></td>
    <td width="50%" bgcolor="#000000"><a href="#" OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('linksmenu', '111px', '30px', false);">
        <font face="Tahoma" size="1" color="#FFFFFF"><b>&nbsp;Links</b></font>
   </a></td>
   </tr>
  </table>
 </body>
</html>

Click here to return to the tutorial